import React, { useState, useEffect } from 'react'
import { Table, Button, Space, Tag, Modal, message } from 'antd'
import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'
import { User } from '@/types'


const UserList = () => {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState<boolean>(false)
  const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false)
  const [userToDelete, setUserToDelete] = useState<User | null>(null)

  useEffect(() => {
    fetchUsers()
  }, [])

  const fetchUsers = async () => {
    setLoading(true)
    // 模拟数据
    const mockUsers: User[] = [
      { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: 'active' },
      { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑者', status: 'active' },
      { id: 3, name: '王五', email: 'wangwu@example.com', role: '查看者', status: 'inactive' },
    ]
    setTimeout(() => {
      setUsers(mockUsers)
      setLoading(false)
    }, 500)
  }

  const handleDelete = (user: User) => {
    setUserToDelete(user)
    setDeleteModalVisible(true)
  }

  const confirmDelete = async () => {
    if (userToDelete) {
      setUsers(users.filter(u => u.id !== userToDelete.id))
      message.success('用户删除成功')
    }
    setDeleteModalVisible(false)
    setUserToDelete(null)
  }

  const getStatusColor = (status: 'active' | 'inactive') => {
    return status === 'active' ? 'green' : 'red'
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: 'active' | 'inactive') => (
        <Tag color={getStatusColor(status)}>
          {status === 'active' ? '启用' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: User) => (
        <Space size="middle">
          <Button
            type="primary"
            icon={<EditOutlined />}
            size="small"
          >
            编辑
          </Button>
          <Button
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
            size="small"
          >
            删除
          </Button>
        </Space>
      ),
    },
  ]

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <h2>用户管理</h2>
        <Button
          type="primary"
          icon={<PlusOutlined />}
        >
          新增用户
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={users}
        loading={loading}
        rowKey="id"
        pagination={{
          pageSize: 10,
        }}
      />

      <Modal
        title="确认删除"
        open={deleteModalVisible}
        onOk={confirmDelete}
        onCancel={() => setDeleteModalVisible(false)}
        okText="确认"
        cancelText="取消"
        okButtonProps={{ danger: true }}
      >
        <p>确定要删除用户 {userToDelete?.name} 吗？此操作不可恢复。</p>
      </Modal>
    </div>
  )
}

export default UserList
